<!--
 * @Author       : wfl
 * @LastEditors  : wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-05-29 11:54:36
 * @LastEditTime : 2023-11-24 16:10:38
-->
<script lang="ts" setup name="Breadcrumb">
import { compile } from 'path-to-regexp'
import useSettingsStore from '@g/store/modules/settings'
import useMenuStore from '@g/store/modules/menu'
import useRouteStore from '@/global/store/modules/route'

const route = useRoute()

const settingsStore = useSettingsStore()
const menuStore = useMenuStore()
const routeStore = useRouteStore()

const generateI18nTitle = inject(InjectionI18nTitle) as Function

function pathCompile(path: string) {
  const toPath = compile(path)
  return toPath(route.params)
}

const findBread = (menus: any, list: any) => {
  const index = menus.findIndex((item: any) => route.path && (route.fullPath.includes(`${item.path}`) || route.fullPath === item.path))
  menus[index]?.meta && list.push({
    path: '',
    title: menus[index].meta?.title,
    i18n: menus[index].meta?.i18n
  })
  if (menus[index].children)
    list = [...list, ...findBread(menus[index].children, list)]

  return list
}

const breadcrumbList = computed(() => {
  const breadcrumbList = []
  if (settingsStore.settings.home.enable) {
    breadcrumbList.push({
      path: '/',
      title: settingsStore.settings.home.title,
      i18n: 'route.home'
    })
  }

  if (route.name !== 'home' && settingsStore.settings.breadcrumb.enableMainMenu) {
    const index = menuStore.allMenus.findIndex(item => item.children.some(r => route.fullPath.indexOf(`${r.path}/`) === 0 || route.fullPath === r.path))
    menuStore.allMenus[index]?.meta && breadcrumbList.push({
      path: '',
      title: menuStore.allMenus[index].meta?.title,
      i18n: menuStore.allMenus[index].meta?.i18n
    })
  }
  try {
    if (route.meta?.breadList) {
      (route.meta.breadList as any).forEach((rou: any) => {
        const meun: any = routeStore.systemRouteMenu.find((v: any) => {
          return v.link === rou
        })
        if (!meun) {
          const rouArr = rou.split('/')
          rouArr.forEach((r: any) => {
            const _menu: any = routeStore.systemRouteMenu.find((v: any) => {
              return v.link === r
            })
            _menu && breadcrumbList.push({
              path: '',
              title: _menu?.name,
              i18n: ''
            })
          })
        }
        meun && breadcrumbList.push({
          path: `/${meun?.link}`,
          title: meun?.name,
          i18n: ''
        })
      })
    }
  }
  catch (error) {

  }
  if (route.meta.breadcrumbNeste)
    breadcrumbList.push(...route.meta.breadcrumbNeste.filter(item => item.hide === false))
  return breadcrumbList
})
</script>

<template>
  <el-breadcrumb
    v-if="settingsStore.settings.breadcrumb.enable && settingsStore.mode === 'pc' && settingsStore.settings.app.routeBaseOn !== 'filesystem'"
    class="breadcrumb"
    :class="{
      [`breadcrumb-${settingsStore.settings.breadcrumb.style}`]: settingsStore.settings.breadcrumb.style !== '',
    }"
  >
    <transition-group name="breadcrumb">
      <el-breadcrumb-item
        v-for="(item, index) in breadcrumbList"
        :key="JSON.stringify(item)"
        :to="index < breadcrumbList.length - 1 && item.path !== '' ? pathCompile(item.path) : ''"
      >
        {{
          index < breadcrumbList.length - 1 ? generateI18nTitle(item.i18n, item.title) : settingsStore.titleFirst
            ? settingsStore.title : generateI18nTitle(item.i18n, item.title) }}
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<style lang="scss" scoped>
 .breadcrumb {
      margin-left: 20px;
      white-space: nowrap;

      :deep(.el-breadcrumb__item) {
        display: inline-block;
        float: none;

        span {
          font-weight: normal;
        }

        &:last-child .el-breadcrumb__inner {
          color: var(--el-text-color-secondary);
          transition: var(--el-transition-color);
        }
      }

      &.breadcrumb-modern {
        :deep(.el-breadcrumb__item) {
          .el-breadcrumb__inner {
            display: inline-block;
            background-color: var(--el-fill-color);
            transition: background-color 0.3s, var(--el-transition-color);
            padding: 8px 16px;
            clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);

            &.is-link:hover {
              background-color: var(--el-fill-color-darker);
            }
          }

          &:first-child:not(:last-child) .el-breadcrumb__inner {
            padding-left: 12px;
            border-radius: 6px 0 0 6px;
            clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
          }

          &:last-child:not(:first-child) .el-breadcrumb__inner {
            background-color: var(--el-fill-color-darker);
            padding-right: 12px;
            border-radius: 0 6px 6px 0;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%);
          }

          &:first-child:is(:last-child) .el-breadcrumb__inner {
            background-color: var(--el-fill-color-darker);
            padding-left: 12px;
            border-radius: 6px 0 0 6px;
            clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
          }

          .el-breadcrumb__separator {
            display: none;
          }
        }
      }
    }
</style>
